<template>
	<view class="content">
		<view class="box">
			<view class="people-box u-flex">
				<view class="box-title">
					组名
				</view>
				<view class="imgs-box u-flex">
					<u-input v-model="form.group_name" placeholder="请输入组名" inputAlign="right" fontSize="13"
						class="u-flex-input"></u-input>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					查看人
				</view>
				<view class="imgs-box u-flex">
					<view class="imgs-box2">
						<view class="item-img-bg" v-for="(item1,i) in form.user_ids_user" :key="i" >{{strFormat(item1.nickname)}}</view>
						<!-- <u--image class="user-img" v-for="(item1,i) in form.user_ids_user" :key="i" :src="item1.avatar"
							shape="circle" width="40rpx" height="40rpx">
						</u--image> -->
					</view>
					<text class="add-btn" @click="pickUser('user')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>

			<view class="people-box u-flex">
				<view class="box-title">
					被查看人
				</view>
				<view class="imgs-box u-flex">
					<view class="imgs-box2">
						<view class="item-img-bg" v-for="(item1,i) in form.user_auth_ids_user" :key="i" >{{strFormat(item1.nickname)}}</view>
						<!-- <u--image class="user-img" v-for="(item1,i) in form.user_auth_ids_user" :key="i"
							:src="item1.avatar" shape="circle" width="40rpx" height="40rpx">
						</u--image> -->
					</view>
					<text class="add-btn" @click="pickUser('user_auth')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
		</view>
		<u-button class="save-btn"  @click="saveForm">保存</u-button>
	</view>
</template>

<script>
	import {
		checkdetail,
		checkadd
	} from '@/api/archives.js'
	export default {
		data() {
			return {
				auth_icon: require('@/static/img/mettingRoomConfig/auth-icon.png'),
				form: {
					id:'',
					group_name: '',
					user_ids_user:[],
					user_auth_ids_user:[]
				},
				btnLoading:false,
				info: {
					user_ids_user:'',
					user_auth_ids_user:''
				},
				type: ''
			};
		},
		onReady(){
			if(this.$route.query.id&&this.$route.query.id){
				this.getcheckdetail(this.$route.query.id)
			}
		},
		onLoad(options) {},
		onShow() {
			var userlist = uni.getStorageSync('sel_user_list');
			console.log("userlist****",userlist,this.type);
			var ids = '';
			var users = [];
			if(userlist&&userlist.length>0){
				for (var i = 0; i < userlist.length; i++) {
				  ids = i == 0 ? userlist[i].id : ids + "," + userlist[i].id;
				}
				users=userlist;
				if (this.type == "user") {
					this.form.user_ids_user = users;
					this.info.user_ids_user = ids;
				} else if (this.type == "user_auth") {
					this.form.user_auth_ids_user = users;
					this.info.user_auth_ids_user = ids;
				} 
				uni.setStorageSync('ext_data', this.form);
			}
		},
		methods: {
			strFormat(str){
				if(str.length>3){
					return str.substring(0,3)+'...';
				}else{
					return str
				}
			},
			getcheckdetail(id) {
				let params = {
					id: id
				}
				checkdetail(params).then(res => {
					this.form = res.data
					uni.setStorageSync('ext_data', this.form);
					uni.removeStorageSync('sel_user_list');
					console.log("8888888",res,this.form)
					this.info.user_ids_user=this.form.user_ids
					this.info.user_auth_ids_user=this.form.user_auth_ids
				})
			},
			pickUser(type) {
				this.type = type;
				var user_ids = 0;
				if (this.type == 'user') {
					user_ids = this.info.user_ids_user;
				} else if (this.type == "user_auth") {
					user_ids = this.info.user_auth_ids_user;
				} 
				uni.setStorageSync('sel_user_ids', "0," + user_ids);
				const url = "/pages/tabbar/meeting-room/change/index?user_ids=" + user_ids
				uni.navigateTo({
					url,
				});

			},
			saveForm() {
				if(this.btnLoading == true){
					return
				}
				this.btnLoading = true
				let params = {
					id: this.form.id,
					group_name: this.form.group_name,
					user_ids:JSON.stringify(this.form.user_ids_user),
					user_auth_ids: JSON.stringify(this.form.user_auth_ids_user),
				}
				console.log("222--params",params)
				checkadd(params).then(res => {
					console.log(res)
					if (res.code ===1) {
						this.$toast('保存成功');
						uni.removeStorageSync('ext_data');
							this.btnLoading = false
						// setTimeout(() => {
							uni.navigateBack()
						// }, 2000)
						
					} else {
						// setTimeout(() => {
							this.btnLoading = false
						// }, 1000)
						this.$toast(res.msg);
					}

				})
			},
		}

	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-bottom: 150rpx;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	/deep/..uni-picker-container .uni-picker-custom * {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input .uni-input-placeholder {
		color: #999999 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.title-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		width: 80%;
	}

	.user text {
		font-size: 24rpx;
		font-weight: 500;
		color: #4871C0;
		margin-left: 10rpx;
	}

	.box-part {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx 30rpx;
	}

	.box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		min-width: 120rpx;
	}

	.box-row {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.box-row text:first-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.box-row text:last-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.box {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.people-box {
		justify-content: space-between;
		padding: 30rpx;
	}

	.u-flex-input /deep/.uni-picker {
		color: #333333 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.u-flex-input .uni-input-placeholder {
		color: #999999 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.people-box:first-child {
		border-bottom: 2px solid #F8F8F8;
	}

	.add-btn {
		background-color: #4871C0;
		border-radius: 100%;
		color: #ffffff;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.user-img {
		margin-right: 20rpx;
	}
   .item-img-bg{
		   margin-right: 20rpx;
    	   width:64rpx;
    		height:64rpx;
    		border-radius: 50%;
    		background-color: #4871C0;
    		color: #ffffff;
    		font-size: 20rpx;
    		text-align: center;
    		line-height: 64rpx;
    }
	.imgs-box2,.imgs-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		flex: 1;
	}

	.save-btn {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 0;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		background-color: #4871C0;
		border-radius: 8rpx;
		width: calc(100% - 40rpx);
	}
</style>
